<template>
    <el-card shadow="never">
    <div slot="header" ref="topHeader">
      <el-form  class="formSearch" :inline=true :model="listQuery">
        <el-form-item :label-width="labelWidth" label="用户名:">
          <el-input minlength="120px" v-model="listQuery.namePhone" placeholder="用户名/电话" clearable/>
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="状态:">
          <el-select  minlength="120px" v-model="listQuery.isEnable" style="width: 120px" placeholder="用户状态" clearable>
            <el-option label="启用" :value="true"/>
            <el-option label="已禁用" :value="false"/>
          </el-select>
        </el-form-item>
         <el-form-item :label-width="labelWidth" label="时间设置:">
            <el-time-select 
              placeholder="起始时间"
              v-model="listQuery.startTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }">
            </el-time-select>
            <el-time-select class="end-date"
              placeholder="结束时间"
              v-model="listQuery.endTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: listQuery.startTime
              }">
            </el-time-select>

         </el-form-item>
        
        <el-form-item class="searchBox">
          <el-button minlength="120px" type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button minlength="120px" type="info" icon="el-icon-delete" @click="reset">清空</el-button> 
          <el-button minlength="120px" type="text" :icon="moreIcon" @click="moreSearch">更多</el-button> 
       </el-form-item>
      <transition name="el-zoom-in-top">
          <div class="Wrap"  v-show="searchMore">
          <el-form-item :label-width="labelWidth" label="用户名:">
            <el-input minlength="120px" v-model="listQuery.namePhone" placeholder="用户名/电话" clearable/>
          </el-form-item>
          <el-form-item :label-width="labelWidth" label="籍贯:">
            <el-select  minlength="120px" v-model="listQuery.isEnable" style="width: 120px" placeholder="用户状态" clearable>
              <el-option label="启用" :value="true"/>
              <el-option label="已禁用" :value="false"/>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="labelWidth" label="户口所在地:">
            <el-input minlength="120px" v-model="listQuery.namePhone" placeholder="用户名/电话" clearable/>
          </el-form-item>
          <el-form-item :label-width="labelWidth" label="状态:">
            <el-select  minlength="120px" v-model="listQuery.isEnable" style="width: 120px" placeholder="用户状态" clearable>
              <el-option label="启用" :value="true"/>
              <el-option label="已禁用" :value="false"/>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="labelWidth" label="用户名:">
            <el-input minlength="120px" v-model="listQuery.namePhone" placeholder="用户名/电话" clearable/>
          </el-form-item>
          <el-form-item :label-width="labelWidth" label="状态:">
            <el-select  minlength="120px" v-model="listQuery.isEnable" style="width: 120px" placeholder="用户状态" clearable>
              <el-option label="启用" :value="true"/>
              <el-option label="已禁用" :value="false"/>
            </el-select>
          </el-form-item>

          </div>
      </transition>



      </el-form>
    </div>
      <el-row>
          <el-col class="col-page" :span="24">  <!--与 el-card 有冲突，会导致table右侧border线变为双线的问题可以使用如下方式解决-->
            <table-page 
              :loading="loading" 
              :tableData="tableData"
              :allAlign="allAlign"
              :listQuery="listQuery"
              :customTableHeight="customTableHeight"
              @headerCellClickEvent="headerCellClickEvent"
              @headerCellDBLClickEvent="headerCellDBLClickEvent"
              @headerCellContextMenuEvent="headerCellContextMenuEvent"
              @cellClickEvent="cellClickEvent"
              @cellDBLClickEvent="cellDBLClickEvent"
              @cellMouseenterEvent="cellMouseenterEvent"
              @cellMouseleaveEvent="cellMouseleaveEvent"
              @cellContextMenuEvent="cellContextMenuEvent"
              @scrollEvent="scrollEvent"
              @removeRow="removeRow"
              @closeDialog="closeDialog"
              @addEdit="addEdit"
              @removeSelectData="removeSelectData"
              @findList="findList"
              >
              <!--
                @remove  删除单个的钩子函数
                @closeDialog 关闭窗口
                @addEdit 修改或者新增
                @removeSelectData 选择删除
              -->

              <template slot="toolbarButton">
                  <vxe-button icon="fa fa-photo" status="perfect">万岁</vxe-button>
              </template> 

              <template slot="tableColumns">
                <vxe-table-column field="id" title="id" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="username" title="姓名" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="nickName" title="昵称" min-width="120" sortable></vxe-table-column>
                <vxe-table-column field="phone" title="电话" width="120" sortable></vxe-table-column>
                <vxe-table-column field="origin" title="籍贯" width="120" sortable></vxe-table-column>
                <vxe-table-column field="location" title="所在地" width="120" sortable></vxe-table-column>
                <vxe-table-column field="school" title="所在学校" width="120" sortable></vxe-table-column>
                <vxe-table-column field="hot" title="是否火热" width="120" sortable></vxe-table-column>
                <vxe-table-column field="content" title="内容" min-width="150" sortable></vxe-table-column>
              </template>


            </table-page>

                <!--更新和编辑操作-->
            <add-edit
              :dialog-visible="addEditVisible"
              :data="addEditData"
              @close="closeDialog"
            />
          </el-col>
      </el-row>
    </el-card>
</template>

<script>
  import addEdit from '@/views/demo/addEdit'
  import tablePage from '@/components/TablePage/tablePage'
  import systemUserApi from '@/api/system/user'
   export default {
          data () {
            return {
              addEditVisible: false,//是否显示编辑
              addEditData: {},//需要编辑的数据
              customTableHeight: "85%",//高度
              labelWidth:"100px",//"调整label显示的宽度"
              searchMore:false,
              moreIcon:"el-icon-arrow-down",
              allAlign: null,
              loading: false,
              listQuery: {//封装查询数据
                username: null,
                nickName: null,
                phone:null,
                origin:null,
                startTime:null,
                endTime:null
              },
              tableData: [{
                            "id": 1,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "1112231231231",
                            "origin": "1河北",
                            "location": "1北京",
                            "school": "1学校在哪里",
                            "hot": "1热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 2,
                            "username": "admin",
                            "nickName": "2顶级管理员",
                            "phone": "2112231231231",
                            "origin": "2河北",
                            "location": "2北京",
                            "school": "2学校在哪里",
                            "hot": "2热热热热热热热热热热热",
                            "content":"21111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 3,
                            "username": "3admin",
                            "nickName": "3顶级管理员",
                            "phone": "3112231231231",
                            "origin": "3河北",
                            "location": "3北京",
                            "school": "3学校在哪里",
                            "hot": "3热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 4,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 5,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 6,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 7,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 8,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 9,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 10,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 11,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 12,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 13,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 14,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 15,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 16,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 17,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          },{
                            "id": 18,
                            "username": "admin",
                            "nickName": "顶级管理员",
                            "phone": "112231231231",
                            "origin": "河北",
                            "location": "北京",
                            "school": "学校在哪里",
                            "hot": "热热热热热热热热热热热",
                            "content":"1111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222"
                          }]
            }
          },
          created () {
              //loading 用于控制进度。
              // this.loading = true
              // setTimeout(() => {
              //   this.loading = false
              // }, 3000)

              // systemUserApi.list(this.listQuery).then(res => {
              //   this.tableData = res.data || []
              //   this.loading = false
              // }).catch(() => this.loading = false);


          },
          components: {
            tablePage,addEdit
          },
          methods: {
            //重置
            reset(){
              this.listQuery = {//封装查询数据
                username: null,
                nickName: null,
                phone:null,
                origin:null,
                startTime:null,
                endTime:null
              }
            },search(){
              this.findList(this.listQuery);
            },moreSearch(){
              this.searchMore = !this.searchMore;
              if(this.searchMore){
                this.moreIcon = "el-icon-arrow-down"
              }else{
                this.moreIcon = "el-icon-arrow-up"
              }
              
            },findList:function(dataQuery){
                //查询
                debugger;
                this.listQuery={
                  litaolin:"litaolin"
                }
                this.listQuery = _.assign(this.listQuery, dataQuery);
                console.log("listQuery:",this.listQuery);
            },closeDialog:function(){
                if (this.addEditVisible) {
                  this.findList()
                }
                this.addEditVisible = false
                this.addEditData = {
                            "id": null,
                            "username": "",
                            "nickName": "",
                            "phone": "",
                            "origin": "",
                            "location": "",
                            "school": "",
                            "hot": "",
                            "content":""
                          }
             },addEdit(row){
                if (row) {
                  this.addEditData = JSON.parse(JSON.stringify(row))
                  console.log(this.addEditData)
                }
                this.addEditVisible = true;
             },//删除按钮
             removeRow:function(row){
                  this.$message.success('删除成功');
                  // selectDatas.forEach(item => {
                  //   console.log("item.id:",item.id);
                  // })
                  //systemUserApi.remove(row.id).then(res => {});
             },
             //勾选删除
             removeSelectData:function(selectDatas){
                 this.$message.success('删除成功');
             },scrollEvent:function(scrollTop,scrollLeft){
                console.log(`滚动事件scrollTop=${scrollTop} scrollLeft=${scrollLeft}`)

             },cellContextMenuEvent:function(row){
                console.log(`右键行 ${row.name}`)
             }
             ,cellMouseleaveEvent:function(column){
                console.log(`鼠标离开单元格${column.title}`)
             }
             ,cellMouseenterEvent:function(column){
                console.log(`鼠标进入单元格${column.title}`)
             }
             ,cellDBLClickEvent:function(column){
              console.log(`单元格双击${column.title}`);
             }
             ,cellClickEvent:function(column){
                console.log(`单元格点击${column.title}`)
             }
             ,headerCellContextMenuEvent:function(column){
                console.log(`右键列 ${column.title}`)
              }
              ,headerCellDBLClickEvent:function(column){
                console.log(`表头单元格双击${column.title}`)
              }
              ,headerCellClickEvent:function(column){
                console.log(`表头单元格点击${column.title}`)
              }
              ,//关闭窗口对数据进行初始哈
              closeDialog() {
                this.addEditVisible = false
                this.addEditData = {
                            "id": null,
                            "username": "",
                            "nickName": "",
                            "phone": "",
                            "origin": "",
                            "location": "",
                            "school": "",
                            "hot": "",
                            "content":""
                          }
              },
            //选中删除
            removeSelectData(){
                let selectDatas = this.$refs.tableRef.getCheckboxRecords();
                this.$confirm('删除后将无法恢复，是否继续？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  closeOnPressEscape: false,
                  closeOnClickModal: false,
                  type: 'warning'
                }).then(() => {
                  console.log("删除成功!"+selectDatas);
                  this.$message.success('删除成功');
                  // selectDatas.forEach(item => {
                  //   console.log("item.id:",item.id);
                  // })
                  //systemUserApi.remove(row.id).then(res => {});
                })
            },printSelectEvent:function(){
                    //打印选中
                this.$refs.tableRef.print({
                    data: this.$refs.tableRef.getCheckboxRecords()
                  })
            },
             printEvent () {
                  //打印
              console.log(this.$refs.tableRef);
              this.$refs.tableRef.print({
                sheetName:"最新系统",
                isHeader: false,
                isFooter:true,
                columnFilterMethod: column => ['username', 'nickName'].includes(column.property)  
              });
            },
            exportDataEvent () {
              //导出与打印
              this.$refs.tableRef.openExport()
            },
            exportEventXls() {
                this.$refs.tableRef.exportData({
                  filename: 'export',
                  sheetName: '导出数据',
                  type: 'xlsx'
                })
              }
          }
        }
</script>

<style scoped>
  .col-page{
    margin: -15px 0.5px 0.5px 0.5px;
  }
  .el-card__body{
    padding:0.5px;
  }
   /** 80-60 */
  .formSearch{
    margin-left: -20px;
  }
  .Wrap{
    clear: both;
  }
  .searchBox{
    float:right;
  }

  .el-form-item{
    padding-top:5px ;
  }
  .end-date{
    margin-left: 10px;
  }
</style>

